<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>个人回顾</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="#(CPATH)/view/css/jquery-weui.css" />
    <link rel="stylesheet" href="#(CPATH)/view/css/style.css" />
    <link rel="stylesheet" href="#(CPATH)/view/weui/style/weui.css">
    <link rel="stylesheet" href="#(CPATH)/view/weui/example/example.css">
    <script src="#(CPATH)/view/js/jquery.js"></script>
    <script src="#(CPATH)/view/js/lib.js"></script>
    <script src="#(CPATH)/view/js/jquery-weui.js"></script>
    <link rel="stylesheet" href="#(CPATH)/view/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="#(CPATH)/_view/static/layer_mobile/layer.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
</head>

<body class=" bdclass-z2">
<div class="weui-gallery" id="gallery">
            <span class="weui-gallery__img" id="galleryImg"></span>
            
        </div>
    <!-- 头部 -->
    <!-- 头部 -->
    <!-- 内容 -->
    <div class="main">
        <ul class="ul-list1" id="animal_record">

        </ul>
        <div class="g-btn1">
            <div class="con"><a href="#(CPATH)/animalRecord" class="a-btn1">爱宠朋友圈</a></div>
            <div class="con"><a href="#(CPATH)/animalRecord/person" class="a-btn1">成长脚印</a></div>
        </div>
        <div class="pop-z1" style="display: none;">
            <div class="pop-body">
                <div class="item">
                    <a href="javascript:choicePicture();">更换相册封面</a>
                </div>
                <div class="item">
                    <a href="javascript:;" class="js-close">取消</a>
                </div>
            </div>
        </div>
<script src="#(CPATH)/view/layui/layui.js" charset="utf-8"></script>
<script>

var $gallery = $("#gallery"),
$galleryImg = $("#galleryImg"),
$uploaderFiles = $("#animal_record"),
tmpl = 'background-image:url(#url#)',
pageNum = 1;


$uploaderFiles.on("click", "img", function(){
	var urlStr = tmpl.replace('#url#', this.getAttribute("src"));
    $galleryImg.attr("style", urlStr);
    $gallery.fadeIn(100);
});
$gallery.on("click", function(){
    $gallery.fadeOut(100);
});

layui.use('flow', function(){
  var flow = layui.flow;
  var totalPage = 0;
  
  flow.load({
    elem: '#animal_record' //流加载容器
    ,scrollElem: '#animal_record' //滚动条所在元素，一般不用填，此处只是演示需要。
    ,done: function(page, next){ //执行下一页的回调
      
      //模拟数据插入
      setTimeout(function(){
        var lis = [];
        $.ajax({
    		type: "post",
    		url: "#(CPATH)/animalRecord/list",
    		data: {
    			  "pageNumber": pageNum
    			  ,"type": ''
    		},
    		dataType: "JSON",
    		async: false,
    		success: function(data) {
    			pageNum = pageNum + 1;
    			totalPage = data.totalPage;
    			var datalist = data.list;
    			for(var i = 0; i < datalist.length; i++) {
    				var record = datalist[i];
    				var remark = '';
    				var str = ' <li><div class="date">' + record.record_date_year + '<br><em>' + record.record_date_month + '</em></div> ';

          	        var urls = record.pics.split(",");
          	        for(var j=0;j<urls.length;j++){
          	        	if(urls[j] != ''){
          	        		str += '<div class="pic"><img src="#(CPATH)' + urls[j] +'" alt=""></div> ';
          	        		break;
          	        	}
          	        	
          	        }
          	        str += '<div class="txt"><h3>消费项目：' + record.project + '</h3></div></li>';
          	        timeStr = record.record_date_cn
          			lis.push(str)
    			}
    		},
    		error: function() {}
    	});
        
        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
        next(lis.join(''), page < totalPage); //假设总页数为 10
      }, 500);
    }
  });
  
  
});
</script>
        <script>
            $(".js-pop").click(function() {
                $(".pop-z1").stop().fadeIn();
            });
            $(".js-close").click(function() {
                $(".pop-z1").stop().fadeOut();
            });
        </script>
    </div>
    <!-- 内容 -->
    <!-- 底部 -->
    <!-- 底部 -->